<template>
  <div>
    <div
      ref="orderDistribution"
      class="chart"
    ></div>
  </div>
</template>

<script>
import * as _ from 'lodash'
import * as echarts from 'echarts'
export default {
  name: 'CityOrderChart',
  data() {
    return {
      chart: null,
      orderDistribution: {
        上海市: 19,
        云南省: 35,
        内蒙古自治区: 15,
        北京市: 11,
        台湾省: 42,
        吉林省: 17,
        四川省: 33,
        天津市: 12,
        宁夏回族自治区: 40,
        安徽省: 22,
        山东省: 25,
        山西省: 14,
        广东省: 29,
        广西壮族自治区: 30,
        新疆维吾尔自治区: 41,
        江苏省: 20,
        江西省: 24,
        河北省: 13,
        河南省: 26,
        浙江省: 21,
        海南省: 31,
        湖北省: 27,
        湖南省: 28,
        澳门特别行政区: 44,
        甘肃省: 38,
        福建省: 23,
        西藏自治区: 36,
        贵州省: 34,
        辽宁省: 16,
        重庆市: 32,
        陕西省: 37,
        青海省: 39,
        香港特别行政区: 43,
        黑龙江省: 18
      }, // 城市订单量
      cityArray: [],
      dataArray: []
    }
  },
  mounted() {
    const dataArray = Object.values(this.orderDistribution)
    this.dataArray = dataArray
    dataArray.sort((a, b) => a - b)
    dataArray.forEach(item => {
      for (const k in this.orderDistribution) {
        if (item === this.orderDistribution[k]) {
          this.cityArray.push(k)
        }
      }
    })
    // 城市分布
    this.chart = echarts.init(this.$refs.orderDistribution)
    this.chart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '3%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: this.cityArray,
        axisLabel: {
          textStyle: {
            fontSize: 12
          }
        }
      },
      series: [
        {
          name: '订单总量',
          type: 'bar',
          data: this.dataArray,
          barWidth: 5
        }
      ]
    })
    //  节流
    window.addEventListener('resize', this.resizeChart)
  },
  destroyed() {
    // 凡是挂载在windows上的事件，离开页面记得要清除销毁
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    // 节流自适应
    resizeChart: _.debounce(function() {
      this.chart.resize()
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 600px;
}
</style>
